接續上一文
六、測試程式
在頁面拖曳 TBContextMenu,設定 Delete1、Delete2、Delete3 三個 TBMenuItem。其中 Delete1 設定 OnClientClick 屬性;Delete2 設定 AutoPostBack 屬性為 True,會以 PostBack 方法引發伺服端的 Click 事件;Delete3 設定 AutoCallBack 屬性為 True,會以 CallBack 方法引發伺服端的 Click 事件,並設定 ClientCallBack 屬性決定接收成功的伺服器事件結果的用戶端事件處理常式名稱。
<bee:TBContextMenu ID="TBContextMenu1" runat="server" ControlID="Label1">
<Items>
<bee:TBMenuItem Key="open" Text="Open" ImageUrl="~/image/folder.png" OnClientClick="alert('open');" />
<bee:TBMenuItem Key="email" Text="Email" ImageUrl="~/image/email.png" OnClientClick="alert('email');" />
<bee:TBMenuItem Key="save" Text="Save" ImageUrl="~/image/disk.png" OnClientClick="alert('save');" />
<bee:TBMenuItem Key="delete1" Text="Delete1" ImageUrl="~/image/cross.png" OnClientClick="alert('client click');" />
<bee:TBMenuItem Key="delete2" Text="Delete2" ImageUrl="~/image/cross.png" AutoPostBack="true" />
<bee:TBMenuItem Key="delete3" Text="Delete3" ImageUrl="~/image/cross.png" AutoCallBack="true" ClientCallBack="ReceiveServerData"/>
</Items>
</bee:TBContextMenu>
在伺服端 Click 事件撰寫測試程式碼,可以利用 Me.IsCallback 來判斷目前是否在 CallBack 狀態中。
Protected Sub TBContextMenu1_Click(ByVal sender As Object, ByVal e As Bee.Web.WebControls.TBContextMenu.ClickEventArgs) Handles TBContextMenu1.Click
If Not Me.IsCallback Then
Me.ClientScript.RegisterStartupScript(Me.GetType, "alert", _
String.Format("alert('PostBack Click: {0}');", e.Key), True)
Else
e.CallbackResult = e.Key
End If
End Sub
另外 Delete3 選單項目有設定 ClientCallBack="ReceiveServerData",所以 aspx 程式碼中會有 ReceiveServerData JavaScript 函式,來接收 CallBack 時由伺服端傳回的結果。
<script type="text/javascript">
function ReceiveServerData(rValue) {
alert('CallBack Click: '+rValue);
};
</script>
執行程式,先選取 Delete1 選單項目,會執行在 OnClientClick 屬性指定的用戶端指令碼。
當選取 Delete2 選單項目時,會產生 PostBack 動作並引發伺服端的 Click 事件,在 Click 事件中會輸出要執行的用戶端指令碼。
當選取 Delete3 選單項目時,會產生 CallBack 動作並引發伺服端的 Click 事件,在 Click 事件中設定 e.CallbackResult 屬性值,並將 e.CallbackResult 的結果回傳給用戶端的 ReceiveServerData 函式來處理。